在昨天的最後有提到可以使用"data"的屬性來對狀態進行操作，先來看一下實作的案例:

const count1 = Vue.createApp({
            data() {
                return {
                    price: 150,
                    quantity: 10
                }
            }
        }).mount('#app');

網頁呈現:

現在的"price"定義為150，而我們現在可以對data進行操作，加入以下程式:

count1.$data.price = 200;

網頁呈現:

price的狀態就會由150變為200，但如果沒有在Vue.createApp的同時就將程式mount到DOM，就沒有辦法對data進行更改甚至會跳出error，這是因為可以使用這個方法是Vue.js會自動對被建立的實體加上"getter"和"setter"的特性，所以如果程式尚未執行，Vue.js就不會建立對應的"$data"。

data共用

關於使用data屬性的注意事項有一個很重要的就是，如果我們因為要建立1個以上擁有相同格式的Vue實體而將要使用的data在實體之外一起定義的話，就會導致所有Vue實體的狀態與內容同時變化無法輸入不同的資料，以下是範例:

        const price = {
            price: '100'
        };
        
        const count1 = Vue.createApp({
            data() {
                return price
            },
        }).mount('#app1');

        const count2 = Vue.createApp({
            data() {
                return price
            },
        }).mount('#app2');

網頁呈現:

如果想要用這樣的方式來定義可以使用JavaScript的淺拷貝"{...data}"來將兩個data變成不同物件來回傳就可以解決這個問題。

        const price = {
            price: '100'
        };
        
        const count1 = Vue.createApp({
            data() {
                return {...price}
            },
        }).mount('#app1');

        const count2 = Vue.createApp({
            data() {
                return {...price}
            },
        }).mount('#app2');

網頁呈現:

今天對Vue.js的data屬性進行了一些更深入的了解與嘗試如果因為data共用產生問題應該如何解決，明天將繼續這樣的進度學習Vue.js，謝謝閱讀。